<template>
  <div>
    <div style="width: 100%; margin-bottom: 20px">
      <div class="btnBox">
        <a-button class="btn addDingDan" type="primary" icon="plus-circle"
          >添加订单</a-button
        >
      </div>
      <div class="checkBox">
        <div class="checkSon">
          <div
            class="fonts"
            style="float: left; line-height: 32px; margin-right: 15px"
          >
            关键字：
          </div>
          <a-input
            style="width: 355px"
            v-decorator="[
              'keyswords',
              {
                rules: [
                  { required: true, message: 'Please input your username!' },
                ],
              },
            ]"
            placeholder="订单号/地址/手机号/收件人/寄件人"
          ></a-input>
        </div>
        <div class="checkSon dataPicker">
          <div class="fonts" style="float: left; line-height: 32px">
            日期区间：
          </div>
          <a-range-picker>
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </div>
        <a-button class="checkSon" type="primary" icon="search">搜索</a-button>
      </div>
      <div style="hight: 32px; line-height: 32px" v-show="!collapsed">
        订单状态：
        <a-select
          mode="multiple"
          size="default"
          placeholder="Please select"
          :default-value="['0']"
          style="width: 350px; margin: 10px 0"
        >
          <a-select-option key="0">全部</a-select-option>
          <a-select-option key="1">未收款</a-select-option>
          <a-select-option key="2">已收款</a-select-option>
          <a-select-option key="3">已发货</a-select-option>
          <a-select-option key="4">已送达</a-select-option>
        </a-select>
      </div>

      <div :style="{ marginTop: '16px' }" v-show="!collapsed">
        其他时间：
        <a-radio-group default-value="a">
          <a-radio-button value="a"> 本周内 </a-radio-button>
          <a-radio-button value="b"> 本月内 </a-radio-button>
          <a-radio-button value="c"> 90天内 </a-radio-button>
          <a-radio-button value="d"> 今年内 </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <a-divider>
      <div @click="collapsed = !collapsed" class="arrow">
        <a-icon :type="collapsed ? 'down-circle' : 'up-circle'" />
        {{ collapsed ? "展开" : "收起" }}选项
      </div>
    </a-divider>

    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ y: 300 }"
      :pagination="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      rowKey="id"
    >
      <span slot="action" slot-scope="text, record">
        <a>打印快递单</a>
        <a-divider type="vertical" />
        <a>详情</a>
        <a-divider type="vertical" />
        <a>删除</a>
        <a-divider type="vertical" />
      </span>
      <span slot="sender" slot-scope="text, record">
        <a-popover trigger="hover">
          <template slot="content">
            {{ record.sender_tel }}
          </template>
          <div style="font-size: 13px" v-limit="5">
            <a>{{ record.sender }}</a>
          </div>
        </a-popover>
      </span>
      <span slot="receiver" slot-scope="text, record">
        <a-popover trigger="hover">
          <template slot="content">
            {{ record.receiver_tel }}
          </template>
          <div style="font-size: 13px" v-limit="5">
            <a>{{ record.receiver }}</a>
          </div>
        </a-popover>
        <a-popover trigger="hover">
          <template slot="content">
            <div>{{ record.receiver_address }}</div>
          </template>
          <div style="font-size: 13px" v-limit="9">
            {{ record.receiver_address }}
          </div>
        </a-popover>
      </span>
      <span slot="state" slot-scope="text, record">
        <a-tag :color="text | fmtStateColor">
          {{ text | fmtState }}
        </a-tag>
      </span>
    </a-table>
    <Center>
      <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-pagination>
    </Center>
  </div>
</template>

<script>

import Center from '@/components/Center.vue';
const columns = [
  {
    dataIndex: "id",
    key: "id",
    title: "流水号",
    width: 100,
  },
  {
    dataIndex: "no",
    key: "no",
    title: "订单号",
    width: 250,
  },
  {
    title: "寄件人",
    dataIndex: "sender",
    key: "sender",
    scopedSlots: { customRender: "sender" },
  },
  {
    title: "收件人",
    dataIndex: "receiver",
    key: "receiver",
    width: 150,
    scopedSlots: { customRender: "receiver" },
  },
  {
    title: "订单状态",
    key: "state",
    dataIndex: "state",
    scopedSlots: { customRender: "state" },
  },
  {
    title: "下单时间",
    key: "createtime",
    dataIndex: "createtime",
  },
  {
    title: "订单总价",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
columns.forEach((r) => (r.align = "center"));

const data = [
  {
    id: 1,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李四",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 0,
    price: 1000,
  },
  {
    id: 9,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李四",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 1,
    price: 1000,
  },
  {
    id: 3,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李四",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 2,
    price: 1000,
  },
  {
    id: 4,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李四",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 3,
    price: 1000,
  },
  {
    id: 5,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李w",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 2,
    price: 1000,
  },
  {
    id: 6,

    no: "Candy20200110123",
    sender: "张三",
    sender_tel: "18899990000",
    receiver: "李w",
    receiver_tel: "199876785645",
    receiver_address: "山东泰安地区1号楼三安远阿萨德",
    createtime: "2020-08-03 11:20:30",
    sendtime: "2020-08-13",
    arrivetime: "",
    state: 2,
    price: 1000,
  },
];

export default {
  components:{
    Center
  },
  data() {
    return {
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50,
      data,
      selectedRowKeys: [],
      columns,
      collapsed: true,
      form: this.$form.createForm(this, { name: "horizontal_login" }),
    };
  },
  filters: {
    fmtState(val) {
      return ["待付款", "待发货", "已发货", "已送达"][val];
    },
    fmtStateColor(val) {
      return ["pink", "orange", "cyan", "green"][val];
    },
  },
  methods: {
    //分页器的方法
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
    },
    //多选框的方法
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
  },
};
</script>

<style lang="scss" scoped>
.arrow {
  margin: 5px 0 0 0;
  font-size: 20px;
  line-height: 32px;
  color: #ccc;
  cursor: pointer;
}
.btnBox {
  display: flex;
  max-width: 300px;
  justify-content: flex-start;
  .btn {
    margin-right: 10px;
  }
}
.checkBox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: flex-start;
  .checkSon {
    margin: 10px 10px 0 0;
  }
  
}
.fyqBox{
    margin: 10px auto;
    text-align: center;
  }
/* @media screen and (max-width: 1100px) {
  .dataPicker {
    display: none;
  }
}
@media screen and (max-width: 1240px) {
  .fonts {
    display: none;
  }
} */

/deep/ .ant-table-body {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #dfe1e2;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f7f7f7;
  }
}
</style>